<template>
	<view class="page">
		<HeaderBar title="添加流动性" showBack backgroundColor="#F6F6F6" fixed />
		<view class="hecswap" :approvestatus="approvestatus" :change:approvestatus="ether.approve" :initdata="initdata"
			:change:initdata="ether.getalldata" :implementid="implementid" :change:implementid="ether.implement">
			<view class="block1">
				<view class="line1">
					<view class="left"></view>
					<view class="right">
						<view class="text">
							余额：
							{{ Number(Number(token1usernum).toFixed(4)) }}
						</view>
					</view>
				</view>
				<view class="line2" :token1num="token1num" :change:token1num="ether.token1numchange">
					<view class="left">
						<image class="tokenicon"
							src="/static/images/tokenicon/0x0000000000000000000000000000000000000000ETH5867.png"
							mode="widthFix"></image>
						<view class="texts">
							<view class="text1">
								{{token1.name}}
							</view>
						</view>
					</view>
					<view class="right">
						<uni-easyinput type='number' :disabled="token2.name=='请选择'" class="input" v-model="token1num"
							placeholder="请输入代币数量" />
					</view>
				</view>
				<view class="line4">
					<view class="left"></view>
					<view class="right">
						<view class="text">
							余额：
							{{ Number(Number(token2usernum).toFixed(4)) }}
						</view>
					</view>
				</view>
				<view class="line5" :token2="token2" :change:token2="ether.token2change">
					<view class="left" @click="selectlist">
						<image v-if="token2.name=='请选择'" class="tokenicon" src="/static/images/notoken.png"
							mode="widthFix"></image>
						<image v-if="token2.name!='请选择'" class="tokenicon"
							:src="'../../static/images/tokenicon/'+token2.contract+initdata.addressInfo.chainType+initdata.addressInfo.chainId+'.png'"
							mode="widthFix"></image>
						<view class="texts">
							<view class="text1">
								{{token2.name}}
							</view>
						</view>
						<image class="xiala" src="@/static/images/newimg31.png" mode="widthFix"></image>
					</view>
					<view class="right">
						{{ Number(Number(token2num).toFixed(4)) }}
						<!-- <uni-easyinput type='number' class="input" v-model="token2num" placeholder="请输入代币数量" /> -->
					</view>
				</view>
				<view class="line6">
					<view class="button button1" @click="ether.tianjia">
						添加
					</view>
					<view class="button button2" @tap="toswapliquidity">
						我的流动性
					</view>
				</view>
			</view>
			<view class="block2">
				<view class="line">
					<view class="left">{{token1.name}}流动池</view>
					<view class="right">
						{{ Number(Number(token1poornum).toFixed(4)) }}
					</view>
				</view>
				<view class="line">
					<view class="left">{{token2.name}}
						<text v-if="token2.name!='请选择'">流动池</text>
					</view>
					<view class="right">
						{{ Number(Number(token2poornum).toFixed(4)) }}
					</view>
				</view>
			</view>
		</view>
		<!-- 选择代币弹窗 -->
		<uni-popup ref="popup1">
			<view class="block3">
				<view class="line1">
					<text class="text1">选择币种</text>
					<uni-icons class="icon1" type="closeempty" size="16" color="#666666" @click="guanbi"></uni-icons>
				</view>
				<view class="line2box" style="overflow-y:scroll;height:500upx;width:100vw;">
					<view class="line2" v-for="(item,index) in tokenlist" :data-index="index"
						@click="selecttoken(item)">
						<view class="left">
							<image class="image1"
								:src="'../../static/images/tokenicon/'+item.contract+initdata.addressInfo.chainType+initdata.addressInfo.chainId+'.png'"
								mode="widthFix"></image>
							<view class="text1">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 代币授权弹窗 -->
		<uni-popup ref="popup2">
			<view class="block4">
				<view class="title">
					{{token2.name}}代币授权
				</view>
				<view class="line3">
					<text class="tip">*</text>使用swap功能需要对代币进行授权，授权成功后请重新操作。
				</view>
				<view class="line4">
					<view class="button button1" @tap="approveclose">
						取消
					</view>
					<view class="button button2" @tap='changeapprovestatus'>
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部确认弹窗 -->
		<uni-popup ref="popup4" type="bottom" background-color="#FFFFFF" border-radius="10px 10px 0 0">
			<view class="popupTitle">
				交易详情
			</view>
			<view class="numberBox">
				<view class="number">
					<text v-if="implementinfo.methond=='approve'">申请代币{{implementinfo.symbol}}转账授权</text>
					<text v-else> {{Number(Number(implementinfo.value).toFixed(4))}}JUMP</text>
				</view>
			</view>
			<view class="fromAddress">
				<view class="left">
					付款地址
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.from}}
					</view>
				</view>
			</view>
			<view class="toAddress">
				<view class="left">
					接收地址
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.to}}
					</view>
				</view>
			</view>
			<view class="toAddress">
				<view class="left">
					网络费
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.fee}}JUMP
					</view>
					<text class="chain">=Gas Limit({{implementinfo.gasLimit}})*Gas
						Price({{ Number(Number(implementinfo.gasPrice).toFixed(4) ) }}
						gwei)</text>
				</view>
			</view>

			<view class="popupBtn">
				<view class="pbtn quxiaopth" @tap="cancel">
					取消
				</view>
				<view class="pbtn" @tap="determine">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 密码弹窗 -->
		<PasswordPopup ref="passwordPopup" @close="passwordclose" @confirm="implement" />
	</view>
</template>
<script>
	import {
		getSwapCoin
	} from '@/http/api.js';
	import common from '@/js_sdk/common/common.js'
	export default {
		data() {
			return {
				// 选中的token1信息，因为只能增加和eth的流动性，所以是固定的
				token1: {
					"name": "JUMP",
					"symbol": "JUMP",
					"contract": "0x74Ee46a8E0B57aBC67C1E966DFB9948Bd9F927A0",
					"decimal": "18",
					"ico": ""
				},
				// 选中的token2信息
				token2: {
					"name": "请选择",
					"symbol": "请选择",
					"contract": "",
					"decimal": "18",
					"ico": ""
				},
				// token1的输入数量
				token1num: "",
				// token1拥有的数量
				token1usernum: "0",
				// token2输入的数量
				token2num: "0",
				// token2拥有的数量
				token2usernum: "0",
				// 价格
				price: "0",
				// 池子中token1的数量
				token1poornum: '0',
				// 池子中token2的数量
				token2poornum: "0",
				// token列表，去掉了主币
				tokenlist: [],
				// 授权状态
				approvestatus: false,
				// 执行信息
				implementinfo: null,
				// 执行的id
				implementid: null
			}
		},
		computed: {
			initdata() {
				return {
					addressInfo: this.$store.getters.addressInfo,
					selectedRpc: this.$store.getters.getRpc,
					config: common.config,
				}
			}
		},
		async mounted() {
			this.getSwapCoin()
		},
		methods: {
			...common.methonds,
			// 获取代币1的数量
			returntoken1usernum(num) {
				this.token1usernum = num
				uni.hideLoading()
			},
			// 获取允许兑换的代币
			async getSwapCoin() {
				let params = {
					chain: "5867"
				}
				let res = await getSwapCoin(params);
				let tokenlist = res.data
				let jumpindex;
				tokenlist.forEach(function(item, index) {
					if (item.name == "JUMP") {
						jumpindex = index
					}
				})
				tokenlist.splice(jumpindex, 1)
				this.tokenlist = tokenlist
			},
			// 打开底部选择代币弹窗
			selectlist: function() {
				this.$refs.popup1.open('center')
			},
			// 关闭底部选择代币弹窗
			guanbi() {
				this.$refs.popup1.close()
			},
			// 切换token2
			selecttoken(item) {
				this.token2 = item
				this.$refs.popup1.close()
			},
			// 获取代币2的数量
			returntoken2usernum(num) {
				this.token2usernum = num
			},
			// 获取池子相关信息
			returnpoorinfo(data) {
				this.token1poornum = data.token1poornum
				this.token2poornum = data.token2poornum
				this.price = data.price
			},
			// 获取token2的数量
			token1numchange2(value) {
				this.token2num = value
			},

			// 打开授权
			openapprove() {
				this.$refs.popup2.open('center')
			},
			// 关闭授权
			approveclose() {
				this.$refs.popup2.close()
			},
			// 确认授权方法
			changeapprovestatus() {
				this.approvestatus = true
				this.$refs.popup2.close()
			},

			// 打开确认执行弹窗
			openimplement(data) {
				uni.hideLoading()
				this.approvestatus = false
				this.implementinfo = data
				this.$refs.popup4.open()
			},
			// 取消执行
			cancel() {
				this.$refs.popup4.close()
			},
			// 确认执行，打开密码弹窗
			determine() {
				this.$refs.passwordPopup.open()
			},
			// 密码弹窗点击确认
			implement() {
				// 输入框的值
				this.implementid = this.implementinfo.id
				this.cancel()
				this.passwordclose()
			},
			// 关闭密码弹窗
			passwordclose() {
				this.$refs.passwordPopup.close()
			},
			// 执行结束
			implementover() {
				this.token1num = ""
				this.token2num = 0
			},
			// 跳转我的流动性
			toswapliquidity() {
				uni.navigateTo({
					url: "/pages/swapliquidity/index"
				})
			}
		}
	}
</script>
<script module="ether" lang="renderjs">
	export default {
		data() {
			return {
				// 初始化的信息
				initdata: {},
				// JS 注入的状态 
				jsstatus: false,
				// 数据同步的状态
				datastatus: false,
				// 等待要执行的信息
				implementidinfo: null,
				// 等待要执行的id
				implementid: null,
				// 价格字段
				price: 0,
				// token1用户的数量
				token1usernum: 0,
				// token2用户的数量
				token2usernum: 0,
				// token2
				token2: null,
				// token2的数量
				token2num: 0,
				// token1的数量
				token1num: 0,
				//执行的合约方法
				methond: "",
			}
		},
		mounted() {
			// 动态引入较大类库避免影响页面展示
			let script = document.createElement('script')
			script.src = 'static/script/ethers-5.2.umd.min.js'
			script.onload = this.changjsstatus
			document.head.appendChild(script)
		},
		methods: {
			// 同步数据
			getalldata(newValue) {
				if (newValue) {
					this.initdata = newValue
					this.datastatus = true
					if (this.jsstatus == true) {
						this.getyue()
					}
				}
			},
			// js同步
			changjsstatus() {
				this.jsstatus = true
				if (this.datastatus == true) {
					this.getyue()
				}
			},
			// 获取主币余额
			async getyue() {
				if (this.initdata && this.initdata.addressInfo) {
					this.$ownerInstance.callMethod('showloading')
					try {
						let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
						let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
						let address = signer.address
						let bignum = await provider.getBalance(address);
						this.token1usernum = ethers.utils.formatUnits(bignum, "18")
						this.$ownerInstance.callMethod('returntoken1usernum', this.token1usernum)
					} catch (e) {
						this.$ownerInstance.callMethod('error', "合约执行失败")
					}
					this.$ownerInstance.callMethod('hideloading')
				}

			},
			// 代币2发生变换
			async token2change(newValue) {
				if (newValue.name != "请选择") {
					this.$ownerInstance.callMethod('showloading')
					try {
						let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
						let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
						let address = signer.address
						let contract = new ethers.Contract(newValue.contract, this.initdata
							.config.erc20abi, signer);
						let bignum = await contract.balanceOf(address)
						let num = ethers.utils.formatUnits(bignum, newValue.decimals)
						this.token2 = newValue
						this.token2usernum = num
						this.$ownerInstance.callMethod('returntoken2usernum', num)

					} catch (e) {
						this.$ownerInstance.callMethod('error', "合约执行失败")
					}
					this.$ownerInstance.callMethod('hideloading')
					this.selectd()
				}
			},
			// 获取池子信息
			async selectd() {
				this.$ownerInstance.callMethod('showloading')
				try {
					let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
					let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
					// 获取池子的地址

					let contract2 = new ethers.Contract(this.initdata.config.swapfactory, this.initdata.config
						.factoryabi,
						signer);
					let data2 = await contract2.getPair(this.initdata.config.weth, this.token2.contract)
					// 获取池子里两个代币的总数
					let contract3 = new ethers.Contract(data2, this.initdata.config.pairabi, signer);
					let data3 = await contract3.getReserves()
					let token0 = await contract3.token0()
					let token1 = await contract3.token1()
					let token1poornum, token2poornum;
					if (token0 == this.initdata.config.weth) {
						token1poornum = ethers.utils.formatUnits(data3[0], '18')
						token2poornum = ethers.utils.formatUnits(data3[1], this.token2.decimal)
					} else {
						token1poornum = ethers.utils.formatUnits(data3[1], this.token2.decimal)
						token2poornum = ethers.utils.formatUnits(data3[0], '18')
					}
					// let contract5 = new ethers.Contract(this.initdata.config.swaprouter, this.initdata.config
					// 	.routerabi, signer);
					// let bili = await contract5.getAmountsOut(ethers.utils.parseUnits('1', '18'), [this.initdata.config
					// 	.weth,
					// 	this.token2.contract
					// ])

					this.price = Number(token2poornum) / Number(token1poornum)

					let returndata = {
						token1poornum,
						token2poornum,
						price: this.price
					}
					this.$ownerInstance.callMethod('returnpoorinfo', returndata)
				} catch (e) {
					this.$ownerInstance.callMethod('error', "合约执行失败")
				}
				this.$ownerInstance.callMethod('hideloading')
			},
			// token1代币发生变化
			token1numchange(newValue) {
				if (newValue == "" && this.$ownerInstance) {
					this.token1num = ""
					this.token2num = 0
					this.$ownerInstance.callMethod('token1numchange2', this.token2num)
					return
				}
				if (newValue) {
					this.token1num = newValue
					this.token2num = newValue * this.price
					this.$ownerInstance.callMethod('token1numchange2', this.token2num)
				}
			},
			// 添加流动性预执行
			async tianjia(e) {
				if (this.token2 == null) {
					return this.$ownerInstance.callMethod("error", "请选择代币")
				}
				if (this.token1num == "") {
					return this.$ownerInstance.callMethod("error", "请输入代币数量")
				}
				if (Number(this.token1num) <= 0) {
					return this.$ownerInstance.callMethod("error", "请输入正确代币数量")
				}

				if (Number(this.token1usernum) < Number(this.token1num)) {
					return this.$ownerInstance.callMethod("error", "JUMP代币余额不足")

				} else if (Number(this.token2usernum) < Number(this.token2num)) {
					return this.$ownerInstance.callMethod("error", this.token2.name + "代币余额不足")
				}
				this.$ownerInstance.callMethod('showloading')
				try {
					let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
					let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
					let address = signer.address
					let GasPrice = await provider.getGasPrice()
					let contract = new ethers.Contract(this.token2.contract, this.initdata.config
						.erc20abi,
						signer);
					let bignum = await contract.allowance(address, this.initdata.config.swaprouter)
					let allowancenum = bignum.toString()

					if (Number(allowancenum) < Number(ethers.utils.parseUnits(this.token2num.toString(), this.token2
							.decimal))) {
						this.$ownerInstance.callMethod('hideloading')
						this.$ownerInstance.callMethod('openapprove')
						return
					}
					let timestamp = Date.now() + 60000;
					let contract2 = new ethers.Contract(this.initdata.config.swaprouter, this.initdata
						.config.routerabi, signer);
					let Gaslimit = await contract2.estimateGas.addLiquidityETH(
						this.token2.contract,
						ethers.utils.parseUnits(String(this.token2num), this.token2.decimal),
						1,
						1,
						address,
						timestamp + 60000, {
							value: ethers.utils.parseUnits(this.token1num.toString(), "18")
						})
					let data = await contract2.populateTransaction.addLiquidityETH(
						this.token2.contract,
						ethers.utils.parseUnits(String(this.token2num), this.token2.decimal),
						1,
						1,
						address,
						timestamp + 60000, {
							value: ethers.utils.parseUnits(this.token1num.toString(), "18"),
							gasPrice: GasPrice.toString(),
							gasLimit: Gaslimit.toString()
						})
					this.implementidinfo = data
					this.implementid = Date.now()
					let res = {
						from: data.from,
						to: data.to,
						value: ethers.utils.formatUnits(data.value, "ether"),
						data: data.data,
						gasLimit: data.gasLimit.toString(),
						gasPrice: ethers.utils.formatUnits(data.gasPrice, "gwei"),
						fee: ethers.utils.formatUnits(data.gasLimit * data.gasPrice, "ether"),
						id: this.implementid
					}
					this.methond = "exchange"
					this.$ownerInstance.callMethod('openimplement', res)

				} catch (e) {
					this.$ownerInstance.callMethod('error', "合约执行失败")
					//TODO handle the exception
				}
				this.$ownerInstance.callMethod('hideloading')

			},
			// 授权预执行
			async approve(newValue) {
				if (newValue && newValue == true) {
					this.$ownerInstance.callMethod('showloading')
					try {
						let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
						let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
						let address = signer.address
						let GasPrice = await provider.getGasPrice()
						let contract = new ethers.Contract(this.token2.contract, this.initdata.config
							.erc20abi,
							signer);
						let Gaslimit = await contract.estimateGas.approve(this.initdata.config.swaprouter, this
							.initdata
							.config.approvenum)
						let data = await contract.populateTransaction.approve(this.initdata.config.swaprouter, this
							.initdata
							.config.approvenum, {
								value: ethers.BigNumber.from("0"),
								gasPrice: GasPrice.toString(),
								gasLimit: Gaslimit.toString()
							})
						this.implementidinfo = data
						this.implementid = Date.now()
						let res = {
							from: data.from,
							to: data.to,
							value: ethers.utils.formatUnits(data.value, "ether"),
							data: data.data,
							gasLimit: data.gasLimit.toString(),
							gasPrice: ethers.utils.formatUnits(data.gasPrice, "gwei"),
							fee: ethers.utils.formatUnits(data.gasLimit * data.gasPrice, "ether"),
							id: this.implementid,
							symbol: this.token2.name,
							methond: "approve"
						}
						this.methond = "approve"
						this.$ownerInstance.callMethod('openimplement', res)

					} catch (e) {
						this.$ownerInstance.callMethod('error', "合约执行失败")
						//TODO handle the exception
					}
					this.$ownerInstance.callMethod('hideloading')


				}
			},
			// 去执行
			async implement(newValue) {

				if (newValue && newValue == this.implementid) {
					this.$ownerInstance.callMethod('showloading')
					try {
						let provider = new ethers.providers.JsonRpcProvider(this.initdata.selectedRpc);
						let signer = new ethers.Wallet(this.initdata.addressInfo.privateKey, provider);
						let res = await signer.sendTransaction(this.implementidinfo)
						let calldata = await provider.waitForTransaction(res.hash);
						if (calldata.status == 1) {
							if (this.methond == "approve") {
								this.$ownerInstance.callMethod("error", '授权成功,请重新操作')
							} else {
								this.$ownerInstance.callMethod("error", '交易请求成功')
								this.$ownerInstance.callMethod('implementover')
							}

						}
						this.getyue()
						this.token2change(this.token2)

					} catch (e) {
						//TODO handle the exception
						this.$ownerInstance.callMethod('error', "合约执行失败")
					}
					this.$ownerInstance.callMethod('hideloading')

				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #F7F7F7;

		.hecswap {
			padding-top: 26upx;
			height: 100%;
			overflow-y: scroll;
			padding-bottom: 100upx;
			box-sizing: border-box;

			.block1 {
				width: 702upx;
				background-color: #fff;
				border-radius: 32upx;
				padding: 40upx 24upx;
				box-sizing: border-box;
				margin: 0upx auto;

				.line1 {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						font-size: 28upx;
						color: #666666;
					}

					.right {
						display: flex;
						align-items: center;

						.image {
							width: 48upx;
						}

						.text {
							font-size: 28upx;
							color: #666666;
						}
					}
				}

				.line2 {
					width: 654upx;
					height: 140upx;
					background-color: #F7F7F7;
					border-radius: 24upx;
					box-sizing: border-box;
					padding: 26upx 24upx;
					margin-top: 16upx;
					display: flex;
					align-items: center;

					.left {
						display: flex;
						align-items: center;
						width: 50%;

						.tokenicon {
							width: 72upx;
						}

						.texts {
							.text1 {
								font-size: 28upx;
								color: #333333;
							}

							.text2 {
								font-size: 18upx;
								color: #999999;
								margin-top: 4upx;
							}

							margin-left:24upx;
						}
					}

					.right {
						margin-left: 50upx;

						input {
							height: 100upx;
							line-height: 100upx;
							font-size: 32upx;
							// text-align: right;
						}
					}
				}

				.line3 {

					.image {
						display: block;
						margin: 0px auto;
						width: 64upx;
						margin-top: 24upx;
					}
				}

				.line4 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30upx;

					.left {
						font-size: 28upx;
						color: #666666;
					}

					.right {
						display: flex;
						align-items: center;

						.image {
							width: 48upx;
						}

						.text {
							font-size: 28upx;
							color: #666666;
						}
					}
				}

				.line5 {
					width: 654upx;
					height: 140upx;
					background-color: #F7F7F7;
					border-radius: 24upx;
					box-sizing: border-box;
					padding: 26upx 24upx;
					margin-top: 16upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						width: 50%;

						.tokenicon {
							width: 72upx;
						}

						.texts {
							.text1 {
								font-size: 28upx;
								color: #333333;
							}

							.text2 {
								font-size: 18upx;
								color: #999999;
								margin-top: 4upx;
							}

							margin-left:24upx;
						}

						.xiala {
							width: 24upx;
							margin-left: 20upx;
						}
					}

					.right {
						margin-left: 50upx;

						input {
							height: 100upx;
							line-height: 100upx;
							font-size: 28upx;
						}
					}
				}

				.line8 {
					margin-top: 30upx;

					.input {
						height: 100upx;
					}
				}

				.line6 {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					margin-top: 40upx;

					.button {
						width: 303upx;
						line-height: 92upx;
						text-align: center;

						color: #fff;
						border-radius: 16upx;
					}

					.button1 {
						background-color: #FFBC42;
					}

					.button2 {
						background-color: #03BAE8;
					}
				}

				.line7 {
					width: 662upx;
					line-height: 92upx;
					background-color: #FF760F;
					color: #fff;
					text-align: center;
					border-radius: 16upx;
					margin-top: 24upx;
				}
			}

			.block2 {
				width: 702upx;
				// height:328upx;
				margin: 0upx auto;
				background-color: #fff;
				padding: 6upx 32upx;
				box-sizing: border-box;
				margin-top: 32upx;
				border-radius: 32upx;
				padding-bottom: 30upx;

				.line {
					display: flex;
					justify-content: space-between;
					margin-top: 36upx;

					.left {
						color: #888888;
						font-size: 32upx;
					}

					.right {
						color: #333333;
					}
				}
			}

		}

		.block3 {
			height: 600upx;
			width: 686upx;
			background-color: #fff;
			border-radius: 20upx 20upx 20upx 20upx;

			.line1 {
				text-align: center;
				position: relative;
				padding-top: 32upx;
				padding-bottom: 30upx;

				.text1 {
					font-size: 36upx;
					color: #333333;
				}

				.icon1 {
					width: 48upx;
					height: 48upx;
					position: absolute;
					right: 32upx;
					top: 32upx;
					border-radius: 50%;
					background-color: #EEEEEE;
					text-align: center;
					line-height: 48upx;
				}
			}

			.line2box {
				.line2 {
					display: flex;
					justify-content: space-between;
					padding: 0upx 32upx;
					align-items: center;
					margin-top: 24upx;

					.left {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.image1 {
							width: 72upx;
						}

						.text1 {
							font-size: 32upx;
							color: #4B3E58;
							margin-left: 16upx;
						}
					}

					.right {
						font-size: 40upx;
						color: #4B3E58;
					}
				}
			}

			.line3 {
				width: 686upx;
				line-height: 88upx;
				text-align: center;
				font-size: 28upx;
				color: #fff;
				background: #26CF6D;
				margin: 0px auto;
				margin-top: 40upx;
				border-radius: 18upx;
				margin-top: 44upx;

			}

		}

		.block4 {
			width: 686upx;
			padding: 32upx 56upx;
			border-radius: 48upx;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				font-size: 48upx;
				color: #333333;
				text-align: center;
				border-bottom: 2upx solid #F7F7F7;
				padding-bottom: 32upx;
			}

			.line1 {
				font-size: 28upx;
				color: #545454;
				margin-top: 32upx;
			}

			.line2 {
				margin-top: 16upx;
				height: 96upx;

				.input {
					height: 96upx;
					width: 100%;


				}
			}

			.line3 {
				font-size: 32upx;
				color: #333;
				margin-top: 16upx;

				.tip {
					color: red;
				}
			}

			.line4 {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.button {
					width: 271upx;
					height: 92upx;
					line-height: 92upx;
					border-radius: 64upx;
					text-align: center;
					color: #fff;
					margin-top: 48upx;
				}

				.button1 {
					background: #FFBC42 !important;
				}

				.button2 {

					background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
				}
			}

		}
	}

	// 底部弹窗
	.popupTitle {
		text-align: center;
		position: relative;
		height: 110upx;
		line-height: 110upx;
		font-size: 36upx;
		border-bottom: 1upx solid #D8D8D8;

		.iconfont {
			position: absolute;
			right: 30upx;
		}
	}

	.numberBox {
		padding: 0 56upx;
		margin-top: 32upx;

		.number {
			width: 100%;
			text-align: center;
			font-size: 36upx;
			color: #3D3D3D;
			background: #F5F6F8;
			border-radius: 12upx;
			line-height: 96upx;
		}
	}

	.toAddress {
		margin-top: 0;
		border-top: 1upx solid #D8D8D8;
		border-bottom: 1upx solid #D8D8D8;
	}

	.fromAddress,
	.toAddress {
		padding: 54upx 54upx 52upx;
		font-size: 28upx;
		display: flex;

		.left {

			color: #999999;
			width: 152upx;
		}

		.right {
			flex: 1;

			.address {
				color: #3D3D3D;
				word-break: break-all;
			}

			.chain {
				color: #999999;
				font-size: 20upx;
			}
		}
	}

	.popupBtn {
		// background: red;
		padding: 30upx 40upx;
		display: flex;
		justify-content: space-between;

		.pbtn {
			font-size: 26upx;
			color: #F6F6F6;
			line-height: 88upx;
			background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
			border-radius: 10upx;
			text-align: center;
			width: 46%;
		}

		.quxiaopth {
			background: #FFBC42 !important;
		}
	}


	:deep(.uni-popup-dialog) {
		background-color: #F5F6F8;

		.uni-dialog-title {
			.uni-popup__info {
				color: #3D3D3D;

				.uni-dialog-title-text {
					font-size: 36upx;
					font-weight: 400;
				}

			}
		}

		.uni-dialog-button-group {
			border-top-color: #D8D8D8;
			border-top-width: 1upx;

			.uni-dialog-button-text {
				color: #368521;
			}

			.uni-border-left {
				border-left-color: #D8D8D8;
				border-left-width: 1upx;

				.uni-button-color {
					color: #D56B6F;
					font-size: 28upx;
				}
			}
		}

	}



	.uni-form-item {
		width: 100%;

		.input-wrapper {
			display: flex;
			height: 70upx;
			background: #FFFFFF;
			padding: 0 0upx;
			border: 1upx solid #999999;
			align-items: center;
			border-radius: 10upx;

			.uni-input {
				flex: 1;
				background-color: #fff;
			}
		}

		/deep/ .uni-easyinput__content-input {
			background-color: #fff !important;
		}
	}
</style>